<template>
  <AppMemberLayout>
    <div class="order-detail-page" v-if="orderDetail">
      <DetailAction
        :orderDetail="orderDetail"
        :getOrderDetail="getData(orderDetail.id)"
        @onOrderListReload="getData(orderDetail.id)"
      ></DetailAction>
      <!-- 操作栏 -->
      <!-- 步骤条-->
      <XtxSteps
        :active="orderDetail.orderState === 6 ? 1 : orderDetail.orderState"
      >
        <XtxStepItem
          title="提交订单"
          :desc="orderDetail.createTime"
        ></XtxStepItem>
        <XtxStepItem title="付款成功" :desc="orderDetail.payTime"></XtxStepItem>
        <XtxStepItem
          title="商品发货"
          :desc="orderDetail.consignTime"
        ></XtxStepItem>
        <XtxStepItem title="确认收货" :desc="orderDetail.endTime"></XtxStepItem>
        <XtxStepItem
          title="订单完成"
          :desc="orderDetail.evaluationTime"
        ></XtxStepItem>
      </XtxSteps>
      <!-- 物流栏 -->
      <Suspense>
        <template v-slot:default>
          <DetailLogistics v-if="[3, 4, 5].includes(orderDetail.orderState)" />
        </template>
        <template v-slot:fallback>loading...</template>
      </Suspense>
      <!-- 订单商品信息 -->
      <DetailOrderGoods :orderDetail="orderDetail" />
    </div>
  </AppMemberLayout>
</template>
<script>
import AppMemberLayout from "@/components/AppMemberLayout";
import { ref } from "vue";
import { getOrderDetail } from "@/api/member";
import { useRoute } from "vue-router";
import DetailAction from "@/views/member/order/components/DetailAction";
import DetailLogistics from "@/views/member/order/components/DetailLogistics";
import DetailOrderGoods from "@/views/member/order/components/DetailOrderGooods";
export default {
  name: "OrderDetailPage",
  components: {
    AppMemberLayout,
    DetailAction,
    DetailLogistics,
    DetailOrderGoods,
  },
  setup() {
    // 获取订单详情
    const { orderDetail, getData } = useOrderDetail();
    // 查看物流
    return {
      orderDetail,
      getData,
    };
  },
};
function useOrderDetail() {
  // 获取路由信息对象
  const route = useRoute();
  // 用于存储订单详情信息
  const orderDetail = ref(null);
  // 获取订单详情数据
  const getData = (id) => {
    getOrderDetail(id).then((data) => {
      orderDetail.value = data.result;
    });
  };
  getData(route.params.id);
  return { orderDetail, getData };
}
</script>
<style scoped lang="less">
.order-detail-page {
  background: #fff;
  height: 100%;
}
</style>
